<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/maps-icons.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">

<polymer-element name="event-schedule" noscript>
  <template>
    <style>
      .container {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 30px;
        margin-bottom: 30px;
      }
      table {
        width: 100%;
        font-size: 1.2em;
        border:#ccc 1px solid;
      }
      table thead {
        background-color: #4184f3;
        color: #fff;
        font-weight: bold;
      }
      table td {
        position: relative;
        padding-top: 13px;
        padding-bottom: 13px;
        background-color: #c5d9fb;
      }      
      tbody {
        text-align: center;
      }
      table td, table th {
        padding: 7px;
      }
      td img {
        display: none;
      }     

      @media (min-width: 1120px) {
        .container {
          margin-left: auto;
          margin-right: auto;
          max-width: 800px; 
        }
      }         
      @media screen and (max-width: 600px), (min-width: 751px) and (max-width: 930px) {
        table thead {
          display: none;
        }
        table td {
          display: block;
          border-bottom: white 1px solid;
          position: relative;
          padding-top: 13px;
          padding-bottom: 13px;
          text-align: left;
          background-color: #c5d9fb;
        }
        td img, td core-icon {
          display: inline-block;
          width: 24px;
          height: 24px;
        }
        .time {
          background-color: #4184f3;
          color: #fff;
          font-weight: bold;
        }
        .nosession {
          display: none;
        }
        .break {
          color: green;
        }        
      }      
    </style>
    <div class="container">
      <h1>日程安排</h1>
      <p>本次活动由xxxxxxxxxxx分会场组成。Android 和 Web 会场是xxxxxxx，也是本次活动的主会场。xxxxxxxxx。</p>
      <p>内容安排持续更新中，敬请关注。</p>
      <table>
        <thead>
           <tr>
             <th>时间</th>
             <th>xxxx 分会场</th>
             <th>xxxx 分会场</th>
             <th>xxxx 分会场</th>
           </tr>
        </thead>
        <tbody>
         <tr>
            <td class="time">x:xx</td>
            <td colspan="2">签到入场</td>
            <td rowspan="6" class="nosession">-</td>
          </tr>
          <tr>
            <td class="time">x:xx</td>
            <td colspan="2">开场介绍</td>
          </tr>
          <tr>
            <td class="time">xx:xx</td>
            <!-- 改链接 -->
            <td><img src="images/icons/android.svg">xxxxxx</td>
            <!-- 改链接 -->
            <td><img src="images/icons/chrome.svg">xxxxx xxx</td>
          </tr>
          <tr>
            <td class="time">10:50</td>
            <!-- 改链接 -->
            <td><img src="images/icons/android.svg">xxxxx</td>
            <!-- 改链接 -->
            <td><img src="images/icons/chrome.svg">xxxx</td>
          </tr>
          <tr>
            <td class="time">xx:xx</td>
            <!-- 改链接 -->
            <td colspan="2" class="break"><core-icon icon="maps:local-restaurant"></core-icon>xxx</td>
          </tr>
          <tr>
            <td class="time">xx:xx</td>
            <!-- 改链接 -->
            <td><img src="images/icons/android.svg">xxxxxx</td>
            <td><img src="images/icons/chrome.svg">xxxx</td>
          </tr>
          <tr>
            <td class="time">xx:xx</td>
            <!-- 改链接 -->
            <td><img src="images/icons/android.svg">xxx</td>
            <td><img src="images/icons/chrome.svg">xx</td>
            <td><img src="images/icons/laboratory.png">xxxxx</td>
          </tr>
          <tr>
            <td class="time">14:40</td>
            <td colspan=3 class="break"><core-icon icon="maps:local-cafe"></core-icon>xxxxx</td>
          </tr>
          <tr>
            <td class="time">xx:xx/td>
            <!-- 改链接 -->
            <td><img src="images/icons/android.svg">xxx</td>
            <td><img src="images/icons/chrome.svg">xx</td>
            <td><img src="images/icons/laboratory.png">xxxxx</td>
          </tr>
          <tr>
            <td class="time">xx:xx</td>
            <td><img src="images/icons/android.svg">xxx</td>
            <td><img src="images/icons/chrome.svg">xx</td>
            <td><img src="images/icons/laboratory.png">xx</td>
          </tr>     
          <tr>
            <td class="time">16:40</td>
            <td><img src="images/icons/android.svg">xxxx</td>
            <td><img src="images/icons/chrome.svg">xxx</td>
            <td class="nosession">-</td>
          </tr>     
          <tr>
            <td class="time">xx:xx</td>
            <td colspan=3>xxxxx</td>
          </tr>           
        </tbody>
      </table>
    </div>
    
  </template>
</polymer-element>